import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './Tabs.scss'
import { AtTabs } from 'taro-ui'

export default class Tabs extends Component {

  

  /**
   * 1 显示tabs信息
   *  1 获取父组件传递过来的tabs数据
   *  2 使用map将tabs数据显示出来
   */
  
  handleTabsNameClick(e){
    //1 获取点击的tabs索引
    let {index}=e.currentTarget.dataset// console.log(index) index表示点击的位置
    //2 执行父组件的方法
    this.props.onClick({index})
  }

  render () {
    let {tabs} = this.props //获取父组件传递过来的属性信息
    return (
      <View className='tabs'>
        <View className="tabs_top">
        {
          tabs.map((v,index)=>{
            return(
              <View key={v.id} className='title_item'>
                <View  onClick={this.handleTabsNameClick} data-index={v.id} className={v.isActive?'title_item_name title_item_name_active':'title_item_name'}>{v.value}</View>
                <View  className={v.isActive?'title_item_bottom title_item_bottom_active':'title_item_bottom'}></View>
              </View>
            )
          })
        }
        </View> 
        <ScrollView scrollY className="tabs_bottom">
          {this.props.children}
        </ScrollView>
      </View>
    )
  }
}
